<template>
	<view class="count u-p-t-5">
		<view class="u-m-t-10 u-m-b-20">
			<!-- <u-toast ref="tabs"></u-toast> -->
			<u-tabs ref="tabs" v-if="control" bg-color="#ffffff" :bold="bold" 
			:active-color="activeColor" :list="list" @change="change" 
			:current="current"  :font-size="35" inactive-color="#cccbc3"
			:is-scroll="isScroll"></u-tabs>
		</view>
		<view class="">
			<view class="">
				<view class="volume white" v-for="(value,index) in num" :key="index" v-if="current==value.current">
					<u-row>
						<u-col span="4">
							<view class="red u-p-t-40 u-p-b-20">
								<view class="">
									￥<text class="txt-size">{{value.money}}</text>
								</view>
								<text>{{value.type}}</text>
							</view>
						</u-col>
						<u-col span="8" class="u-relative">
							<view class="u-p-r-20">
								<view  v-if="current!=0">
									<u-image width="200rpx" mode="widthFix" class="alignment"
									:src="value.img"></u-image>
								</view>
								<view :class="(current==0?'u-abso no_use':'u-abso use')">
									<view class="u-text-right u-font-30">{{value.title}}</view>
									<view class="u-text-right u-light-color u-m-t-20">{{value.time}}到期</view>
								</view>
							</view>
						</u-col>
					</u-row>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				data: [{
					name: '未使用',
				}, {
					name: '已使用',
				}, {
					name: '已过期',
				}],
				current: 0,
				isScroll: false,
				activeColor:'#000000',
				bold: true,
				control: true,
				num:[
					{
					current:2,
					money:10,
					type:"折扣劵",
					title:"APP兑换折扣劵，金额为10元",
					time:"2019-10-20",
					img:"../../static/image/images/coupon-expired.png"
				},
				{
					current:1,
					money:10,
					type:"折扣劵",
					title:"APP兑换折扣劵，金额为20元",
					time:"2019-10-20",
					img:"../../static/image/images/coupon-used.png"
				}]
			}
		},
		onLoad() {
			this.list = this.data;
		},
		methods:{
			change(index) {
				this.current = index;
				console.log(this.current);
			},
		}
	}
</script>

<style scoped lang="scss">
	// .count{
	// 	background-color: #f5f5f5;
	// 	height: calc(100vh - 44px);
	// }
	.red{
		color: #FFFFFF;
		background-color: #b51c1c;
		text-align: center;
		border-radius: 10rpx;
	}
	.volume{
		width: 90%;
		margin: 10rpx auto;
	}
	.white{
		border-radius: 10rpx;
		background-color: #FFFFFF;
	}
	.txt-size{
		font-size: 80rpx;
	}
	.alignment{
		float: right;
	}
	.use{
		top: 35rpx;right: 50rpx;
	}
	.no_use{
		top: -48rpx;right: 50rpx;
	}
</style>
